<template>
    <div class="container_index">
        <img
            class="icon_del"
            src="@/assets/images/index/del.png"
            @click="goBack" />
        <p class="welcome-text">
            亲, 欢迎登录
            <span class="welcome-text_larger">平台</span>
        </p>
        <!-- <van-cell-group> -->
        <van-field
            v-model="phone"
            placeholder="请输入手机号"
            type="tel"
            :maxlength="selectedCountryCode == '+86' ? 11 : 15"
            :formatter="formatPhoneNumber"
            @click-right-icon="showKeyboard">
            <template #left-icon>
                <van-dropdown-menu>
                    <van-dropdown-item
                        v-model="selectedCountryCode"
                        :options="countryCodeOptions"
                        @change="onCountryCodeChange" />
                </van-dropdown-menu>
            </template>
        </van-field>

        <van-number-keyboard
            :show="isKeyboardShow"
            @blur="hideKeyboard"
            @input="onInput"
            @delete="onDelete" />
        <!-- </van-cell-group> -->
        <div class="btn_get_code">
            <van-button
                :disabled="isPhoneInvalid"
                @click="handleGetVerifyCode"
                color="linear-gradient(to right, #ffc837, #f96016)"
                size="large"
                round>
                获取验证码
            </van-button>
        </div>
        <div class="agreement-checkbox">
            <div class="checkbox">
                <van-checkbox
                    v-model="hasAgreedToTerms"
                    icon-size="14px">
                </van-checkbox>
            </div>
            <div>已阅读并同意<span class="agreement-link">《平台服务协议》《隐私权政策》《注册相关协议》</span>,未注册的手机号将自动完成账号注册</div>
        </div>
    </div>
</template>
<script>
import { Notify } from 'vant';
import { setToken } from '@/utils/auth';
export default {
    data() {
        return {
            selectedCountryCode: '+86',
            countryCodeOptions: [
                { text: '+86', value: '+86' },
                { text: '+00', value: '+00' },
            ],
            phone: '',
            isKeyboardShow: false,
            isPhoneInvalid: true, //默认手机号未通过验
            hasAgreedToTerms: false, // 新增数据属性，表示用户是否同意协议
        };
    },
    methods: {
        onCountryCodeClick() {
            // 阻止事件冒泡，避免触发 van-field 的点击事件
            event.stopPropagation();
        },
        onCountryCodeChange(value) {
            console.log(value);
            this.selectedCountryCode = value;
            this.phone = '';
        },
        showKeyboard() {
            // 保留原有逻辑，控制数字键盘显示
            this.isKeyboardShow = true;
        },
        hideKeyboard() {
            // 保留原有逻辑，控制数字键盘隐藏
            this.isKeyboardShow = false;
        },
        onInput(value) {
            // 保留原有逻辑，处理数字键盘输入事件
        },
        onDelete() {
            // 保留原有逻辑，处理数字键盘删除事件
        },
        formatPhoneNumber(value) {
            // ... 清除非数字字符和根据国际区号判断长度的逻辑

            const formattedValue = value;

            // 更新 phone 数据属性，并返回格式化后的值
            // this.phone = formattedValue;

            // 校验手机号码格式，根据结果更新 isPhoneInvalid
            // this.isPhoneInvalid = !this.isValidPhoneNumber(formattedValue);
            if (this.selectedCountryCode == '+86' && this.phone.length == 11) {
                this.isPhoneInvalid = false;
            } else if (this.selectedCountryCode == '+00' && this.phone.length == 15) {
                this.isPhoneInvalid = false;
            } else {
                this.isPhoneInvalid = true;
            }
            console.log(this.isPhoneInvalid);
            return formattedValue;
        },
        isValidPhoneNumber(phoneNumber) {
            // 这里仅做简单示例，实际项目中应根据具体规则进行校验
            const countryCode = this.selectedCountryCode;
            if (countryCode === '+86') {
                return /^1[3-9]\d{9}$/.test(phoneNumber); // 中国大陆手机号码校验规则
            } else if (countryCode === '+00') {
                return /^\d{15}$/.test(phoneNumber); // 示例：其他国家/地区，假设手机号码长度为 15 位且全为数字
            } else {
                throw new Error(`Unsupported country code: ${countryCode}`);
            }
        },
        // 获取验证码
        handleGetVerifyCode() {
            if (!this.hasAgreedToTerms) {
                Notify({ type: 'danger', message: '请先勾选同意协议' });
                return;
            } else {
                this.$http
                    .post('/get/code', { phooneNuber: this.phone })
                    .then(res => {
                        const { success, data, msg } = res.data;
                        Notify({ type: success ? 'success' : 'warning', message: msg });
                        if (success) {
                            this.$store.commit('SET_PHONE', this.phone);
                            this.$router.push({
                                name: 'Code',
                                params: {
                                    phone: this.phone,
                                    countryCode: this.selectedCountryCode,
                                },
                            });
                        }
                    })
                    .catch(err => {});
            }
        },
        goBack() {
            this.$router.go(-1);
        },
    },
};
</script>
<style lang="scss" scoped>
.container_index {
    max-width: 750px;
    margin: auto;
    height: 100vh;
    // border: 1px solid;
    position: relative;

    .welcome-text {
        text-align: left;
        font-size: 1.8rem;
        font-weight: 500;
        padding: 18px;
        padding-top: 5rem;
        margin-bottom: 5rem;
        &_larger {
            color: #f96016;
            font-size: 2.5rem;
            font-weight: 500;
        }
    }
    .icon_del {
        width: 0.8rem;
        position: absolute;
        left: 0;
        top: 0.5rem;
        padding: 5px 5px 5px 18px;
    }
    .btn_get_code {
        margin-top: 3rem;
        padding: 0 12px;
    }
    .agreement-checkbox {
        display: flex;
        font-size: 12px;
        color: gray;
        text-align: left;
        padding: 0 12px;
        position: absolute;
        bottom: 3rem;
        .checkbox {
            margin: 1px 2px;
        }
        .agreement-link {
            color: #020202;
        }
    }
}
// 输入框
/deep/.van-field__value {
    display: flex;
    margin-left: 0.5rem;
}
</style>
